<template>
  <!-- 试题结构客观题表格 -->
  <div
    style="padding: 15px 24px; background: #fff"
    v-loading.fullscreen.lock="loading"
  >
    <el-table
      border
      ref="multipleTable"
      :data="objectivequestionslist"
      tooltip-effect="dark"
      style="width: 100%"
      stripe
      @selection-change="handleSelectionChange"
      :header-cell-style="{
        background: '#D8E4F0',
        color: '#2A303B',
        fontWeight: '500',
      }"
      :height="tableheight"
    >
      <!-- <el-table-column align="center" type="selection" width="55"> -->
      <!-- </el-table-column> -->
      <!-- <el-table-column
                    label="试号">
					<template slot-scope="scope">
						{{ scope.$index+1 }}
					</template>
</el-table-column> -->
      <el-table-column align="center" prop="questionNumber" label="试题编号">
      </el-table-column>
      <el-table-column align="center" label="题型名称">
        <template slot-scope="scope">
          <span v-if="scope.row.questionTypeName">{{
            scope.row.questionTypeName
          }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="满分">
        <template slot-scope="scope">
          <span v-if="scope.row.fullScore">{{ scope.row.fullScore }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="标准答案" width="300">
        <template slot-scope="scope">
          <template v-if="scope.row.optionCount">
            <!-- {{ scope.row.standardAnswer }}   -->
            <span
              v-for="(letter, index) in generateLetters(
                scope.row.optionCount,
                scope.row.id,
                scope.$index
              )"
              :key="index"
              class="contenthover"
              :class="{
                activehover: activeHoverClass(scope.row, index, letter.letter),
              }"
              @click="
                toggleAnswer(scope.row.id, index, letter.letter, scope.$index)
              "
            >
              {{ letter.letter }}
            </span>
          </template>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="试题规则" width="400">
        <template slot-scope="scope">
          <span
            v-if="
              scope.row.questionType == 2 && scope.row.multipleRuleId != 'null'
            "
            >{{
              matchDictValue(dict.type.multiple_rule, scope.row.multipleRuleId)
            }}

            <span v-if="scope.row.multipleRuleId != '2'">
              {{
                scope.row.multipleScoring
                  ? scope.row.multipleScoring + "分"
                  : ""
              }}
            </span>
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="切图设置">
        <template slot-scope="scope">
          <span
            style="
              color: #165dff;
              cursor: pointer;
              padding: 0 8px;
              font-size: 14px;
            "
            @click="showViewerclick(scope.row.sliceUrl)"
            >切图1</span
          >
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <div style="display: flex" class="scopednr">
            <!-- <b @click="editExamschool1(scope.row)">查看小图</b> -->
            <b @click="editExamschool(scope.row)">编辑</b>
            <!-- <b @click="dgdeletequestion(scope.row.id)">删除</b> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-bottom">
      <div class="examfooter">
        <div class="examFootercontent">
          <div>
            <span class="totaldata"
              >共<i>{{ objectivequestionslist.length }}</i
              >条数据,已选{{ multipleSelection.length }}条</span
            >
            <!-- <el-button style="background:#1A48DB;color:#fff;margin-left:20px;border-color:#1A48DB;"
              @click="addtateobjective" v-if="objectivequestionslist.length<=0">批量新增</el-button>
            <el-button style="background:#1A48DB;color:#fff;margin-left:20px;border-color:#1A48DB;"
              @click="editBtn">批量编辑</el-button> -->
            <el-button
              type="primary"
              style="margin-left: 20px"
              @click="importanswer"
              >导入答案</el-button
            >
            <el-button type="primary" @click="submitAnswers"
              >保存答案</el-button
            >
            <!-- <el-button
              type="danger"
              :disabled="multipleSelection.length == 0"
              @click="batchDeletateobjective"
              >批量删除</el-button
            > -->
          </div>
          <!-- <el-pagination
                  background
                  @current-change="handleCurrentChange"
                  :page-sizes="[20, 50,100]"
                  @size-change="handleSizeChange"
                  :page-size="pageSize"
                  layout="sizes, prev, pager, next"
                  :total="total">
              </el-pagination> -->
        </div>
      </div>
    </div>
    <uploadAanswer
      v-if="uploadAanswershow"
      @uploadclick="uploadclick"
      :examid="examid"
    ></uploadAanswer>
    <!-- 单个编辑客观题 -->
    <div class="singleEditobjective" v-if="singleEditobjectiveshow">
      <div class="singleEditobjectivecontent">
        <h3>编辑客观题-{{ editquestioninfolist.questionNumber }}</h3>
        <p>编辑客观题信息</p>
        <div class="editboxstyle">
          <span>试题编号：</span>
          <el-input
            v-model="editquestioninfolist.questionNumber"
            :disabled="editObject == 0 ? false : true"
          ></el-input>
        </div>
        <div class="editboxstyle1">
          <span>试题名称：</span>
          <!-- <el-input v-model="editquestioninfolist.questionName"></el-input> -->
          <el-select
            v-model="editquestioninfolist.basicQuestionTypeId"
            placeholder="请选择"
            @change="scopeChange"
            :disabled="editObject == 0 ? false : true"
          >
            <el-option
              v-for="item in questiontypelist"
              :key="item.id"
              :label="item.questionName"
              :value="item.id"
            ></el-option>
          </el-select>
        </div>
        <div class="editboxstyle">
          <span>满分：</span>
          <el-input
            v-model="editquestioninfolist.fullScore"
            :disabled="editObject == 0 ? false : true"
            @input="
              editquestioninfolist.fullScore = onlyNumber(
                editquestioninfolist.fullScore
              )
            "
          ></el-input>
        </div>
        <div class="editboxstyle">
          <span>标准答案：</span>
          <el-input
            v-model="editquestioninfolist.standardAnswer"
            :disabled="editObject == 0 ? false : true"
          ></el-input>
        </div>
        <div v-if="editQuestionType != 1">
          <template v-if="editObject == 0">
            <p>给分规则</p>
            <!-- {{ dict.type.multiple_rule }} -->
            <el-radio-group v-model="editquestioninfolist.multipleRuleId">
              <div
                class="elcheckboxcontent"
                v-for="item in dict.type.multiple_rule"
                :key="item.value"
                style="margin-bottom: 10px"
              >
                <el-radio :label="item.value">{{ item.label }}</el-radio>
                <div v-if="item.raw.remark == '1'">
                  <el-input
                    v-if="editquestioninfolist.multipleRuleId === item.value"
                    v-model="editquestioninfolist.multipleScoring"
                  ></el-input>
                  <span v-else>-</span>分
                </div>
              </div>
            </el-radio-group>
          </template>
        </div>
        <div v-if="editObject != 0">
          <p>修改标准答案及给分规则（仅阅卷后展示）</p>
          <b>修改正确答案后，如已发布成绩请取消重新发布并运算数据分析。</b>
          <el-radio-group v-model="editquestioninfolist.isFreeQuestion">
            <div class="elcheckboxcontent">
              <el-radio label="1">送分题</el-radio>
            </div>
            <div class="elcheckboxcontent">
              <el-radio label="2">0分题</el-radio>
            </div>
            、
            <div class="elcheckboxcontent">
              <el-radio label="3">修正标准答案</el-radio
              ><el-input
                v-model="editquestioninfolist.standardAnswer"
                @input="
                  editquestioninfolist.standardAnswer = onlyLetters(
                    editquestioninfolist.standardAnswer
                  )
                "
              ></el-input>
            </div>
          </el-radio-group>
          <div v-if="isFreeQuestionShow" style="font-size: 12px;color: #ec555a;">{{editquestioninfolist.isFreeQuestion!=='3'?'请选择给分规则':'请输入正确答案'}}
          </div>
        </div>
        <div class="bcbackcontent">
          <el-button @click="bcobjectiveedit">保存</el-button>
          <el-button @click="backgroundactiveedit">返回</el-button>
        </div>
      </div>
    </div>
    <!-- 图片查看组件 -->
    <ImageViewer
      :images="images"
      :initialIndex="selectedIndex"
      :visible="showViewer"
      @update:visible="(val) => (showViewer = val)"
    />
  </div>
</template>

<script>
import {
  objectivequestionslist,
  fixedobjectAanswer,
  batchdeleteobjetive,
  batchsetAnswer,
  examAssignmentstatus,
  basicQuestionTypeList,
} from "@/api/paperinfo/paperinfo.js";
import uploadAanswer from "./upload";
import ImageViewer from "../imageview/imageview.vue";
// import {questionlist} from "@/api/jcgl/txgl";
import { remove } from "lodash";
export default {
  props: {
    objectivequestionslist: {
      type: Array,
      default: () => [],
    },
    examid: {
      default: () => "",
    },
    pagevale: {
      default: () => "",
    },
    examidnavid: {
      default: () => "",
    },
  },
  dicts: ["multiple_rule"],
  components: {
    uploadAanswer,
    ImageViewer,
  },
  computed: {
    activeHoverClass() {
      return (row, index, letter) => {
        // const isSelected = this.isSelected(row.id, index, letter, row.standardAnswer);
        const isStandardAnswer =
          row.answerArray && String(row.answerArray).includes(letter);
        // return isSelected || isStandardAnswer;
        return isStandardAnswer;
      };
    },
    editQuestionType: function () {
      let data = this.questiontypelist.filter((item) => {
        return item.id == this.editquestioninfolist.basicQuestionTypeId;
      })[0];
      if (data) {
        return data.questionType;
      } else {
        return "";
      }
    },
  },
  data() {
    return {
      isFreeQuestionShow: false,
      loading: false,

      showViewer: false,
      selectedIndex: 0,
      images: [],
      checkList: [],
      attentionIshow: "",
      multipleSelection: [],
      editobjectivequestions: false,
      addobjquestionIshow: false,
      isEditMode: false,
      objdetailinfo: {
        pressflagid: "",
        pressnum: "",
        highestscore: "",
        answer: "",
      },
      questionclassifylist: [
        { name: "单选题", value: 1 },
        { name: "多选题", value: 2 },
        { name: "判断题", value: 3 },
        { name: "断句题", value: 4 },
      ],
      objquestionlist: [
        {
          type: 1,
          itemCaseflagid: "",
          startNum: "",
          endNum: "",
          fixednum: "",
          highestscore: "",
          answers: "",
          questiontype: [],
          optiondirection: [],
          optionsNum: "",
          fullscore: "",
        },
      ],
      addobjquestion: {
        type: 1,
        itemCaseflagid: "",
        startNum: "",
        endNum: "",
        fixednum: "",
        highestscore: "",
        answers: "",
        questiontype: [],
        optiondirection: [],
        optionsNum: "",
        fullscore: "",
      },
      total: 0,
      uploadAanswershow: false,
      singleEditobjectiveshow: false,
      editquestioninfolist: {
        questionNumber: "",
        questionName: "",
        fullscore: "",
        answer: "",
        multipleRuleId: "",
        multipleScoring: "",
        isFreeQuestion: "",
        standardAnswer: "",
        basicQuestionTypeId: "",
      },
      pageSize: 20,
      selectedQuestionIdindex: "",
      selectedAnswers: [],
      questiontypelist: [],
      valueinput: [],
      editObject: "",
      tableheight: 0,
      examSubjectId: 0,
    };
  },

  watch: {
    'editquestioninfolist.isFreeQuestion':{
      handler(newVal, oldVal) {
          this.isFreeQuestionShow = false
        if (newVal == '3' && !this.editquestioninfolist.standardAnswer) {
          this.isFreeQuestionShow = true
        }
      }
    },
    'editquestioninfolist.standardAnswer':{
      handler(newVal, oldVal) {
        if (newVal) {
          this.isFreeQuestionShow = false
        }else{
          this.isFreeQuestionShow = true

        }
      }
    },
    "editquestioninfolist.multipleScoring"(newVal, oldVal) {
      const regex = /^-?\d*\.?\d{0,2}$/;
      if (!regex.test(newVal)) {
        // 如果输入不合法，回退到上一次的合法值
        this.editquestioninfolist.multipleScoring = oldVal;
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.tableheight = window.innerHeight - 340;
    });
  },
  methods: {
    onlyNumber(value) {
      return value.replace(/[^0-9.]/g, "");
    },
    matchDictValue(dictKey, apiValue) {
      // console.info(dictKey, "dictkey");
      const matchedItem = dictKey.find((item) => item.value === apiValue);
      return matchedItem ? matchedItem.label : apiValue;
    },
    //选择题型
    scopeChange(val) {
      console.info(val);
      let list = this.questiontypelist.filter(
        (question) => question.id === val
      );
      console.info(list[0].multipleRuleId, "ddddd");
      if (list[0].multipleRuleId == null && val != 1) {
        this.editquestioninfolist.multipleRuleId =
          this.dict.type.multiple_rule[0].value;
        this.editquestioninfolist.multipleScoring = 5;
      } else {
        this.editquestioninfolist.multipleRuleId = JSON.stringify(
          list[0].multipleRuleId
        );
        this.editquestioninfolist.multipleScoring = JSON.stringify(
          list[0].multipleScoring
        );
      }
    },

    selectQuestion(index) {
      this.objectivequestionslist[index].selected =
        !this.objectivequestionslist[index].selected;
      this.selectedQuestionIdindex = index;
      console.info("data", data);
      console.info("con", con);
    },
    backgroundactiveedit() {
      this.singleEditobjectiveshow = false;
      this.editquestioninfolist.multipleRuleId = null;
      this.editquestioninfolist.multipleScoring = "";
      this.editquestioninfolist = {
        questionNumber: "",
        questionName: "",
        fullscore: "",
        answer: "",
        multipleRuleId: 0,
        multipleScoring: "",
        isFreeQuestion: "",
        standardAnswer: "",
      };
    },
    //保存编辑
    bcobjectiveedit() {
      if(this.editObject!=0){
        if (![1,2,3,'1','2','3'].includes(this.editquestioninfolist.isFreeQuestion)) {
          this.isFreeQuestionShow = true
        }
        if (this.isFreeQuestionShow) {
          return false
        }
      }
      delete this.editquestioninfolist.answerArray;
      console.info(this.editquestioninfolist.standardAnswer,'this.editquestioninfolist.standardAnswer')
      const filteredObject = {
        ...this.editquestioninfolist,
        standardAnswer: this.editquestioninfolist.standardAnswer ? this.editquestioninfolist.standardAnswer
          .toUpperCase()  // 先转换为大写
          .split("")
          .sort((a, b) => a.localeCompare(b))
          .join(""): "",
      }; // 先浅拷贝避免修改原对象
      this.loading = true;
      fixedobjectAanswer(filteredObject)
        .then((res) => {
          console.info(res);
          if (res.code == 200) {
            this.$message({
              message: "编辑成功",
              type: "success",
            });
            this.singleEditobjectiveshow = false;
            this.$emit("emitobjectivequestionsuccess", 1);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //编辑客观题
    editExamschool(con) {
      this.loading = true;
      examAssignmentstatus({ examId: this.examidnavid })
        .then((res) => {
          if (res.code == 200) {
            this.editObject = res.data;
            //题型
            basicQuestionTypeList({ examSubjectId: this.examidnavid })
              .then((response) => {
                this.questiontypelist = response.rows.filter(
                  (question) => question.subjectiveType === 2
                );
                this.singleEditobjectiveshow = true;
                this.examSubjectId = con.examId;
                // this.editquestioninfolist = con;
                this.editquestioninfolist = JSON.parse(JSON.stringify(con));

                this.editquestioninfolist.isFreeQuestion = String(this.editquestioninfolist.isFreeQuestion )
                this.editquestioninfolist.questionName =
                  con.basicQuestionTypeId;
                if (con.multipleRuleId == null && con.questionType != "1") {
                  this.editquestioninfolist.multipleRuleId =
                    this.dict.type.multiple_rule[0].value;
                  this.editquestioninfolist.multipleScoring = 5;
                }
              })
              .finally(() => {
                this.loading = false;
              });
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 将标准答案字符串转为数组，如 "AB" -> ["A", "B"]
    getStandardAnswers(standardAnswer) {
      return standardAnswer ? standardAnswer.split("") : [];
    },
    isSelected(questionId, optionIndex, currentLetter, standardAnswer) {
      // 1. 检查用户是否手动选择过
      const userHasSelected = this.selectedAnswers.some(
        (item) =>
          item.questionId === questionId && item.optionIndex === optionIndex
      );
      // 2. 检查是否是标准答案 (未手动选择时才显示)
      if (!userHasSelected && standardAnswer) {
        const standardAnswers = String(standardAnswer).toUpperCase().split("");
        return standardAnswers.includes(currentLetter.toUpperCase());
      }
      return userHasSelected;
    },
    generateLetters(count, questionId, index) {
      return Array.from({ length: count }, (_, optionIndex) => ({
        letter: String.fromCharCode(65 + optionIndex), // A, B, C...
        questionId,
        optionIndex,
      }));
    },

    // 判断当前选项是否被选中
    isSelected(questionId, optionIndex) {
      return this.selectedAnswers.some(
        (item) => item.id === questionId && item.optionIndex === optionIndex
      );
    },

    // 切换选中状态（点击选项时触发）
    toggleAnswer(questionId, optionIndex, answer, index) {
      this.parentIndex = index;
      this.childrenIndex = optionIndex;
      const question = this.objectivequestionslist[index];
      // 如果 answerArray 不存在，初始化
      if (!question.answerArray) {
        question.answerArray = [];
      } // 检查 answer 是否已存在
      const answerIndex = question.answerArray.indexOf(answer);

      if (answerIndex === -1) {
        // 不存在 → 添加
        question.answerArray.push(answer);
        question.answerArray.sort((a, b) => a.localeCompare(b));
      } else {
        // 已存在 → 移除
        question.answerArray.splice(answerIndex, 1);
      }
      console.log("当前选项状态:", question.answerArray);
    },
    transformData(data) {
      const resultMap = new Map();

      data.forEach((item) => {
        if (!resultMap.has(item.id)) {
          resultMap.set(item.id, {
            id: item.id,
            answer: item.answer,
          });
        } else {
          const existing = resultMap.get(item.id);
          existing.answer += item.answer;
        }
      });

      // 对每个答案按原始optionIndex顺序排序
      return Array.from(resultMap.values()).map((item) => {
        // 如果答案长度大于1，说明是多个选项合并的
        if (item.answer.length > 1) {
          // 将答案按字母顺序排序
          item.answer = [...item.answer].sort().join("");
        }
        return item;
      });
    },
    // 提交选中的答案
    submitAnswers() {
      const result = this.objectivequestionslist.map((item) => {
        return {
          id: item.id,
          answer: item.answerArray.join(""),
        };
      });
      this.loading = true;
      batchsetAnswer(result)
        .then((res) => {
          if (res.code === 200) {
            this.$message({
              message: "答案保存成功",
              type: "success",
            });
            this.$emit("emitobjectivequestion", 1);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // generateLetters(count) {
    //   return Array.from({length: count}, (_, i) =>
    //     String.fromCharCode(65 + i)  // 65是'A'的ASCII码
    //   );
    // },
    uploadclick() {
      this.uploadAanswershow = false;
      this.$emit("emitobjectivequestion", 1);
    },
    // 导入答案
    importanswer() {
      this.uploadAanswershow = true;
    },
    // 格式化输入值
    formatInputValue(value) {
      return value === 0 ? "" : value;
    },
    onlyLetters(value) {
      return value.replace(/[^a-zA-Z,]/g, "");
    },
    onlyNumber(value) {
      return value.replace(/[^0-9.]/g, "");
    },
    onlyzzNumber(value) {
      return value.replace(/[^0-9]/g, "");
    },
    editobjectivequestionssurebc() {
      console.info(this.objdetailinfo, "this.objdetailinfo");

      // 编辑客观题必填校验
      if (!this.validateEditForm()) {
        return; // 校验失败，停止保存
      }

      // 只发送一次请求，保存客观题编辑信息
      editupdatePressFlag(this.objdetailinfo)
        .then((res) => {
          if (res.code == 0) {
            this.$message({
              message: "编辑保存成功",
              type: "success",
            });
            this.editobjectivequestions = false;
            this.$emit("updateobjectivequestionssurebc", false);
          } else {
            this.$message({
              message: res.msg || "保存失败",
              type: "error",
            });
          }
        })
        .catch((error) => {
          console.error("保存失败:", error);
          this.$message({
            message: "网络错误，保存失败",
            type: "error",
          });
        });
    },

    // 编辑客观题表单必填校验
    validateEditForm() {
      // 校验试题编号
      const pressnum = String(this.objdetailinfo.pressnum || "");
      if (!pressnum || pressnum.trim() === "") {
        this.$message({
          type: "error",
          message: "请填写试题编号",
        });
        return false;
      }

      // 校验满分
      const highestscore = String(this.objdetailinfo.highestscore || "");
      if (!highestscore || highestscore.trim() === "") {
        this.$message({
          type: "error",
          message: "请填写满分",
        });
        return false;
      }

      // 校验标准答案
      const answer = String(this.objdetailinfo.answer || "");
      if (!answer || answer.trim() === "") {
        this.$message({
          type: "error",
          message: "请填写标准答案",
        });
        return false;
      }

      return true;
    },

    editobjectivequestionsgoback() {
      this.editobjectivequestions = false;
      this.$emit("updateobjectivequestionssurebc", false);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getRowStyle({ rowIndex }) {
      return {
        backgroundColor: rowIndex % 2 === 1 ? "#FAFAFB" : "#ffffff",
      };
    },
    handleSelectionChange1(val) {
      this.multipleSelection1 = val;
    },
    sureobj() {
      // 校验起止题号与答案数量是否匹配
      if (!this.validateQuestionAnswers()) {
        return; // 校验失败，停止保存
      }

      // 根据模式处理数据
      const processedData = this.objquestionlist.map((item) => {
        // 为所有行数据设置itemCaseflagid
        const baseData = {
          type: item.type,
          itemCaseflagid: sessionStorage.getItem("temCaseflagid"),
          startNum: item.startNum,
          endNum: item.endNum,
          highestscore: item.highestscore,
          answers: item.answers,
        };

        // 如果是编辑模式且有sourceflagid，则包含该字段
        if (this.isEditMode && item.sourceflagid) {
          baseData.sourceflagid = item.sourceflagid;
        }

        return baseData;
      });

      // 按照后端API要求的格式组装数据
      const requestData = {
        templatelist: processedData,
      };

      // 根据模式显示不同的提示信息
      const operationType = this.isEditMode ? "编辑" : "新增";

      // 直接发送完整的JSON数据到后端
      addobjectquestion2(requestData)
        .then((res) => {
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: `${operationType}${res.msg || "成功"}`,
            });
            this.addobjquestionIshow = false;
            this.isEditMode = false; // 重置编辑模式
            this.$emit("emitobjectivequestion", 1);
          } else {
            // 统一的错误处理
            console.error("保存失败:", res.msg);
            this.$message({
              type: "error",
              message: res.msg || `${operationType}失败，请重试`,
            });
          }
        })
        .catch((error) => {
          console.error("网络错误:", error);
          this.$message({
            type: "error",
            message: "网络连接失败，请检查网络后重试",
          });
        });
    },

    // 校验起止题号与答案数量是否匹配
    validateQuestionAnswers() {
      for (let i = 0; i < this.objquestionlist.length; i++) {
        const item = this.objquestionlist[i];
        const rowNum = i + 1;

        // 检查必填字段
        if (!item.startNum || !item.endNum) {
          this.$message({
            type: "error",
            message: `第${rowNum}行：请填写完整的起止题号`,
          });
          return false;
        }

        if (!item.answers || item.answers.trim() === "") {
          this.$message({
            type: "error",
            message: `第${rowNum}行：请填写答案`,
          });
          return false;
        }

        // 计算题目数量：结束题号 - 起始题号 + 1
        const startNum = parseInt(item.startNum);
        const endNum = parseInt(item.endNum);

        if (startNum > endNum) {
          this.$message({
            type: "error",
            message: `第${rowNum}行：起始题号不能大于结束题号`,
          });
          return false;
        }

        const questionCount = endNum - startNum + 1;

        // 计算答案数量：按逗号分割
        const answers = item.answers.trim();
        const answerArray = answers
          .split(",")
          .filter((answer) => answer.trim() !== "");
        const answerCount = answerArray.length;

        // 校验答案数量是否匹配题目数量
        if (answerCount !== questionCount) {
          this.$message({
            type: "error",
            message: `第${rowNum}行：题目范围为${questionCount}题，请输入${questionCount}个答案（当前${answerCount}个答案）`,
          });
          return false;
        }
      }

      return true;
    },
    cancelobj() {
      this.addobjquestionIshow = false;
      this.isEditMode = false; // 重置编辑模式
    },
    addtateobjective() {
      this.isEditMode = false; // 设置为新增模式
      // 重置为默认的新增数据
      this.objquestionlist = [
        {
          type: 1,
          itemCaseflagid: "",
          startNum: "",
          endNum: "",
          highestscore: "",
          answers: "",
        },
      ];
      this.addobjquestionIshow = true;
    },
    //批量删除
    batchDeletateobjective() {
      let ids = this.multipleSelection.map((item) => item.id);
      // sourceflagids
      if (ids.length == 0) {
        this.$message({
          type: "error",
          message: "请选择要删除的题目!",
        });
        return;
      }
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          batchdeleteobjetive(ids).then((res) => {
            if (res.code == 200) {
              this.$emit("emitobjectivequestion", 1);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 单个删除
    dgdeletequestion(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // let obj = {
          //   pressflagids:
          // }
          batchdeleteobjetive([id]).then((res) => {
            if (res.code == 200) {
              this.$emit("emitobjectivequestion", 1);
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 新增客观题行
    addobjsubet(row) {
      // 新增一行到objquestionlist
      const newRow = {
        type: 1,
        itemCaseflagid: "",
        startNum: "",
        endNum: "",
        highestscore: "",
        answers: "",
      };
      this.objquestionlist.push(newRow);
      this.$message({
        type: "success",
        message: "新增行成功!",
      });
    },
    // 删除客观题行
    deleteobjquestion(index) {
      if (this.objquestionlist.length > 1) {
        this.objquestionlist.splice(index, 1);
        this.$message({
          type: "success",
          message: "删除行成功!",
        });
      } else {
        this.$message({
          type: "warning",
          message: "至少保留一行数据!",
        });
      }
    },
    // 批量编辑
    editBtn() {
      this.editobjectivequestions = true;
      // 调用新的API接口，传递itemCaseflagid参数
      // const requestData = {
      //   itemCaseflagid: sessionStorage.getItem('temCaseflagid')
      // }

      // getItemCaseFlagInfoByType1or2(requestData).then(res => {
      //   if (res.code === 0) {
      //     this.$message({
      //       type: 'success',
      //       message: '批量编辑数据获取成功！'
      //     })

      //     // 回显数据到objquestionlist
      //     if (res.obj && res.obj.length > 0) {
      //       this.objquestionlist = res.obj.map(item => ({
      //         type: item.type,
      //         itemCaseflagid: item.itemCaseflagid,
      //         startNum: item.startNum,
      //         endNum: item.endNum,
      //         highestscore: item.highestscore,
      //         answers: item.answers,
      //         sourceflagid: item.sourceflagid // 保存原有ID用于更新
      //       }))
      //     } else {
      //       // 如果没有数据，使用默认结构
      //       this.objquestionlist = [
      //         {
      //           type: 1,
      //           itemCaseflagid: '',
      //           startNum: '',
      //           endNum: '',
      //           highestscore: '',
      //           answers: '',
      //         },
      //       ]
      //     }

      //     // 打开新增客观题窗口（批量编辑复用此窗口）
      //     this.isEditMode = true // 设置为编辑模式
      //     this.addobjquestionIshow = true
      //   } else {
      //     this.$message({
      //       type: 'error',
      //       message: res.msg || '获取数据失败！'
      //     })
      //   }
      // }).catch(error => {
      //   this.$message({
      //     type: 'error',
      //     message: '网络错误，请重试！'
      //   })
      // })
    },
    handleCurrentChange() {},
    handleSizeChange() {},
    showViewerclick(imgs) {
      this.images = [imgs];
      this.showViewer = true;
    },
  },
};
</script>

<style scoped>
.custom-table {
  width: 100%;
  border: 1px solid rgba(216, 228, 240, 0.5);
  border-right: none;
  border-bottom: none;
}

/* 自定义表格内部元素的样式 */
.custom-table >>> .el-table__header-wrapper th {
  background-color: #e8f0fa;
  height: 42px;
  padding: 0;
  text-align: center;
  font-weight: normal;
}

.custom-table >>> .el-table__row td {
  height: 42px;
  padding: 0;
  text-align: center;
  border-bottom: none;
  border-right: solid 1px rgba(216, 228, 240, 0.34);
  font-size: 14px;
}

.el-table .warning-row {
  background: #ffffff;
}

.el-table .success-row {
  background: #d8e4f0;
}

.el-table .el-table__cell {
  padding: 8px 0;
}

.examfooter {
  width: 100%;
  height: 54px;
  /* margin-top: 7px; */
}

.examFootercontent {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.examFootercontent .totaldata {
  font-size: 14px;
}

.examFootercontent .totaldata i {
  display: inline-block;
  color: #295cff;
  font-style: normal;
  line-height: 54px;
  padding: 0 3px;
}

.scopednr b {
  width: 100%;
  display: inline-block;
  font-weight: normal;
  margin: 0 8px;
  color: #165dff;
  cursor: pointer;
  text-decoration: underline;
}

.scopednr b:last-child {
  color: #d54941;
}

.addExamMain {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  z-index: 5;
}

.addExamContent {
  width: 1000px;
  height: auto;
  background: #ffffff;
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  border-radius: 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-sizing: border-box;
  padding: 30px;
}

.addExamContent h3 {
  font-size: 18px;
  padding-bottom: 20px;
}

.addExamContent ul.muchcommentlist li {
  display: flex;
  align-items: center;
  padding-bottom: 14px;
  font-size: 14px;
}

.addExamContent ul.muchcommentlist li span {
  font-size: 14px;
  width: 98px;
  color: #557292;
  text-align: right;
}

.addExamContent ul.muchcommentlist li p {
  position: relative;
}

.addExamContent ul.muchcommentlist li p em {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #c0c4cc;
  cursor: pointer;
}

.addExamContent ul.muchcommentlist li >>> .el-input__inner {
  width: 400px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
}

.inputBox {
  width: 400px;
}

.inputBox1 {
  width: 300px;
}

.addExamContent ul.muchcommentlist li div.inputBox1 >>> .el-input__inner {
  width: 300px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
}

.addExamContent ul.muchcommentlist li >>> .el-range__icon {
  line-height: 27px;
}

.groupbutton {
  display: flex;
  align-items: center;
  padding-top: 20px;
}

.groupbutton >>> .el-button {
  width: 124px;
  height: 34px;
  background: #295cff;
  border-radius: 10px;
  font-size: 14px;
  color: #ffffff;
  padding: 0;
}

.groupbutton >>> .el-button:last-child {
  background: #f2f6fb;
  border-radius: 10px;
  border: 1px solid #295cff;
  color: #295cff;
  margin-left: 24px;
}

.bcontentcolor {
  font-size: 14px;
  color: #295cff;
  display: inline-block;
  margin-left: 20px;
  cursor: pointer;
}

.el-checkbox {
  margin-right: 8px;
}

.infosetcontentfont {
  color: #5b6371;
}

.addExamContent ul.muchcommentlist li.infosetcontentfont span {
  width: auto;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #d8e4f0;
  color: #b3b8c2;
  font-size: 14px;
  text-align: left;
  line-height: 26px;
  padding: 0 16px 0 10px;
  margin-left: 10px;
}

.addExamContent ul.muchcommentlist li.infosetcontentfont i {
  font-style: normal;
  color: #295cff;
  padding: 0 4px;
}

.objsubMain {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 100;
}

.objsubContent {
  box-sizing: border-box;
  width: 1040px;
  height: 700px;
  background: #ffffff;
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  border-radius: 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 24px;
}

.objsubContent h3 {
  font-size: 18px;
  font-weight: normal;
}

.objsubattention {
  display: flex;
  font-size: 14px;
  color: #619cf5;
  padding: 10px 0 24px;
}

.gundongtiaotable {
  width: 100%;
  height: 360px;
  display: flex;
}

.gundongtiaotable::-webkit-scrollbar {
  width: 6px;
  background-color: #eee;
  border-radius: 10px;
}

.gundongtiaotable::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

.gundongtiaotable::-webkit-scrollbar-thumb {
  background: #619cf5;
  border-radius: 10px;
}

.fxwidth {
  font-size: 14px;
  color: #2a303b;
}

.fxwidth >>> .el-input__inner {
  width: 35px;
  height: 30px;
  background: #f2f6fb;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
  padding: 0;
  text-align: center;
}

.answerwidth >>> .el-input__inner {
  width: 156px;
  height: 30px;
  background: #f2f6fb;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
  padding: 0 10px;
}

.selectbox >>> .el-input__inner {
  width: 86px;
  height: 30px;
  /* background: #F2F6FB; */
  border-radius: 10px;
  border: 1px solid #d8e4f0;
  color: #2a303b;
  padding: 0 8px;
}

.selectbox >>> .el-input__icon {
  line-height: 30px;
}

.exambutton {
  display: flex;
  align-items: center;
  margin-top: 24px;
}

.exambutton span {
  width: 124px;
  height: 34px;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
}

.exambutton span:first-child {
  background: #295cff;
  color: #fff;
  margin-right: 24px;
}

.exambutton span:last-child {
  background: #f2f6fb;
  border: 1px solid #295cff;
  color: #295cff;
}

.input-error >>> .el-input__inner {
  border: #ec555a solid 1px;
}

.objsubContent table {
  border-radius: 10px;
  border: 1px solid rgba(216, 228, 240, 0.5);
}

.objsubContent table tr th {
  font-size: 14px;
  font-weight: normal;
  background: #e8f0fa;
  height: 42px;
}

.objsubContent table tr th:first-child {
  border-radius: 8px 0 0 0;
}

.objsubContent table tr th:last-child {
  border-radius: 0 8px 0 0;
}

.objsubContent table tr td {
  height: 42px;
  text-align: center;
  font-size: 14px;
  border-right: solid 1px rgba(216, 228, 240, 0.34);
}

.objsubContent table tr td:last-child {
  border-right: none;
}

.objsubContent table tr td i {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: #999;
}

.objsubContent table tr td em {
  display: block;
}

.objsubContent table tr td span {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.objsubContent table tr td span em {
  font-size: 12px;
  font-style: normal;
}

.objsubContent table tr td span::after {
  content: "";
  width: 43px;
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  background: #000;
}

.objsubContent table tr td span.green {
  color: #288f41;
}

.objsubContent table tr td span.green::after {
  content: "";
  width: 43px;
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  background: #288f41;
}

.objsubContent table tr td span.blue {
  color: #295cff;
}

.objsubContent table tr td span.blue::after {
  content: "";
  width: 43px;
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  background: #295cff;
}

.objsubContent table tr td span.red {
  color: #ec555a;
}

.objsubContent table tr td span.red::after {
  content: "";
  width: 43px;
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  background: #ec555a;
}

.objsubContent table tr td span.gray {
  color: #d8e4f0;
}

.objsubContent table tr td span.gray::after {
  content: "";
  width: 43px;
  height: 1px;
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  background: #d8e4f0;
}

.objsubContent table tr:nth-child(3n) {
  background: #fafafb;
}

.addExamMain {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  z-index: 5;
}

.addExamContent {
  width: 800px;
  height: auto;
  background: #ffffff;
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  border-radius: 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-sizing: border-box;
  padding: 30px;
}

.addExamContent h3 {
  font-size: 18px;
  padding-bottom: 20px;
}

.addExamContent ul.muchcommentlist li {
  display: flex;
  align-items: center;
  padding-bottom: 14px;
  font-size: 14px;
}

.addExamContent ul.muchcommentlist li span {
  font-size: 14px;
  width: 98px;
  color: #557292;
  text-align: right;
}

.addExamContent ul.muchcommentlist li p {
  position: relative;
}

.addExamContent ul.muchcommentlist li p em {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #c0c4cc;
  cursor: pointer;
}

.addExamContent ul.muchcommentlist li >>> .el-input__inner {
  width: 400px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
}

.inputBox {
  width: 400px;
}

.inputBox1 {
  width: 300px;
}

.addExamContent ul.muchcommentlist li div.inputBox1 >>> .el-input__inner {
  width: 300px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
}

.addExamContent ul.muchcommentlist li >>> .el-range__icon {
  line-height: 27px;
}

.groupbutton {
  display: flex;
  align-items: center;
  padding-top: 20px;
}

.groupbutton >>> .el-button {
  width: 124px;
  height: 34px;
  background: #295cff;
  border-radius: 10px;
  font-size: 14px;
  color: #ffffff;
  padding: 0;
}

.groupbutton >>> .el-button:last-child {
  background: #f2f6fb;
  border-radius: 10px;
  border: 1px solid #295cff;
  color: #295cff;
  margin-left: 24px;
}

.bcontentcolor {
  font-size: 14px;
  color: #295cff;
  display: inline-block;
  margin-left: 20px;
  cursor: pointer;
}

.el-checkbox {
  margin-right: 8px;
}

.infosetcontentfont {
  color: #5b6371;
}

.addExamContent ul.muchcommentlist li.infosetcontentfont span {
  width: auto;
  height: 26px;
  border-radius: 4px;
  border: 1px solid #d8e4f0;
  color: #b3b8c2;
  font-size: 14px;
  text-align: left;
  line-height: 26px;
  padding: 0 16px 0 10px;
  margin-left: 10px;
}

.addExamContent ul.muchcommentlist li.infosetcontentfont i {
  font-style: normal;
  color: #295cff;
  padding: 0 4px;
}

.tabletabcopy {
  display: flex;
  align-items: center;
  width: 252px;
  height: 30px;
  background: rgba(41, 92, 255, 0.06);
  border-radius: 4px;
  border: 1px solid #295cff;
}

.tabletabcopy li {
  width: 84px;
  border-right: solid 1px #295cff;
  line-height: 30px;
  font-size: 14px;
  color: #295cff;
  text-align: center;
  cursor: pointer;
}

.tabletabcopy li:last-child {
  border-right: none;
}

.tabletabcopy li.hover,
.tabletabcopy li:hover {
  background: #295cff;
  color: #fff;
}

.copyexamcontent {
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

.copyexamcontent::-webkit-scrollbar {
  width: 4px;
  background-color: #eee;
  border-radius: 10px;
}

.copyexamcontent::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

.copyexamcontent::-webkit-scrollbar-thumb {
  background: #619cf5;
  border-radius: 10px;
}

.copyexamcontent ul {
}

.copyexamcontent ul li {
  padding: 24px 0;
  border-bottom: solid 1px #eff1f4;
  cursor: pointer;
}

.copyexamcontent ul li div {
  font-size: 16px;
  color: #2a303b;
}

.copyexamcontent ul li div span {
  color: #557292;
  font-size: 12px;
  padding-left: 8px;
}

.copyexamcontent ul li p {
  font-size: 14px;
  color: #295cff;
  padding-top: 10px;
}

.copyexamcontent ul li p em {
  font-style: normal;
  margin-right: 10px;
}

.addExamContent >>> .el-upload-dragger {
  width: 522px;
}

.uploadbox {
  width: 522px;
  height: 220px;
  position: relative;
}

.uploadbox a {
  position: absolute;
  right: 0;
  bottom: 10px;
  font-size: 14px;
  color: #295cff;
}

.tablebox {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 4px 16px 0px rgba(85, 114, 146, 0.1);
  border-radius: 10px;
}

.tableboxtitle {
  display: flex;
  align-items: center;
  height: 42px;
  background: #e8f0fa;
  border-radius: 10px 10px 0 0;
}

.tableboxtitle li {
  line-height: 42px;
  text-align: center;
  font-size: 14px;
  color: #2a303b;
  border-right: 1px solid rgba(216, 228, 240, 0.34);
}

.tableboxtitle li:first-child {
  border-radius: 10px 0 0 0;
}

.tableboxtitle li:last-child {
  border-radius: 0 10px 0 0;
  border-right: none;
}

.tableboxcontent {
  width: 100%;
}

.tableboxcontent li:nth-child(2n) {
  background: #fafafb;
}

.bigquestion {
  display: flex;
  align-items: center;
}

.tabletrtd {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 42px;
  border-right: 1px solid rgba(216, 228, 240, 0.34);
}

.bigquestion div.tabletrtd:last-child {
  border-right: none;
}

.addExamContent ul.muchcommentlist li .classobxst >>> .el-input__inner {
  width: 150px;
}

.yes {
  cursor: pointer;
  display: inline-block;
  width: 43px;
  height: 30px;
  border-radius: 10px;
  background: #edf4f0;
  border: solid 1px #53a667;
  font-size: 14px;
  color: #53a667;
  font-style: normal;
  line-height: 30px;
}

.no {
  cursor: pointer;
  display: inline-block;
  width: 43px;
  height: 30px;
  border-radius: 10px;
  background: #fef5f5;
  border: solid 1px #ec555a;
  font-size: 14px;
  color: #ec555a;
  font-style: normal;
  line-height: 30px;
}

.boxsetscorll {
  height: 390px;
  overflow-x: hidden;
  overflow-y: auto;
}

.boxsetscorll::-webkit-scrollbar {
  width: 6px;
  background-color: #eee;
  border-radius: 10px;
}

.boxsetscorll::-webkit-scrollbar-track {
  background-color: #eee;
  border-radius: 10px;
}

.boxsetscorll::-webkit-scrollbar-thumb {
  background: #619cf5;
  border-radius: 10px;
}

.breadBox >>> .el-breadcrumb__inner a,
.breadBox >>> .el-breadcrumb__inner.is-link {
  font-weight: normal;
}

.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: bold;
}

/* 必填字段红色星号样式 */
.required-label {
  position: relative;
}

.required-asterisk {
  color: red;
  font-size: 14px;
  position: absolute;
  top: 0;
  right: 73px;
  line-height: inherit;
}

>>> .el-table th.el-table__cell > .cell {
  font-size: 14px;
  font-weight: 700;
}

.singleEditobjective {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1500;
}

.singleEditobjectivecontent {
  box-sizing: border-box;
  width: 510px;
  height: auto;
  background: #fff;
  border-radius: 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 30px 40px;
}

.singleEditobjectivecontent >>> .el-input__inner {
  width: 120px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid #d8e4f0;
}

.singleEditobjectivecontent >>> .el-input {
  width: 60px;
  height: 30px;
  border-radius: 10px;
}

.elcheckboxcontent {
  display: flex;
  align-items: center;
  margin: 5px 0;
  font-size: 12px;
}

.elcheckboxcontent >>> .el-radio {
  margin-right: 0px;
}

.singleEditobjectivecontent p {
  font-size: 14px;
}

.elcheckboxcontent >>> .el-input {
  margin: 0 10px;
}

.elcheckboxcontent:nth-child(2) {
  margin-bottom: 0;
  margin-top: 10px;
}

.elcheckboxcontent:nth-child(3) {
  margin-top: 0;
}

.editboxstyle {
  display: flex;
  margin: 12px 0;
  align-items: center;
}

.editboxstyle span {
  width: 100px;
  color: #666;
  font-size: 14px;
}

.editboxstyle >>> .el-input__inner {
  width: 340px;
}

.editboxstyle1 {
  display: flex;
  margin: 12px 0;
  align-items: center;
}

.editboxstyle1 span {
  width: 100px;
  color: #666;
  font-size: 14px;
}

.editboxstyle1 >>> .el-input__inner,
.editboxstyle1 >>> .el-input {
  width: 340px;
}

.editboxstyle1 >>> .el-input__icon {
  line-height: 30px;
}

.singleEditobjectivecontent b {
  display: block;
  font-size: 12px;
  font-weight: normal;
  color: #ec555a;
  padding-bottom: 10px;
}

.bcbackcontent {
  margin-top: 20px;
  display: flex;
  padding-right: 20px;
}

.bcbackcontent >>> .el-button {
  width: 130px;
  line-height: 30px;
  font-size: 16px;
  border: none;
}

.bcbackcontent >>> .el-button:first-child {
  background: #1a48db;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.bcbackcontent >>> .el-button:last-child {
  background: rgba(26, 72, 219, 0.1);
  text-align: center;
  line-height: 30px;
  color: #1a48db;
}

.contenthover {
  display: inline-block;
  width: 22px;
  height: 22px;
  background: #1a48db1a;
  border: 1px solid #1a48db;
  border-radius: 6px;
  text-align: center;
  line-height: 20px;
  color: #1a48db;
  text-align: center !important;
  margin: 0 5px;
  cursor: pointer;
}

.activehover {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 1px solid #1a48db;
  border-radius: 6px;
  text-align: center;
  line-height: 20px;
  text-align: center !important;
  margin: 0 5px;
  cursor: pointer;
  background: #1a48db;
  color: #fff;
}

>>> .el-popper {
  z-index: 10000 !important;
}
</style>